<script setup lang='ts'>
import { nextTick, reactive, ref } from 'vue';
import { numberApi } from '@/api/controller'
import { ToastSuccess, Toastloading } from '@/utils/public';
const $emit = defineEmits(['updateList'])
const dataForm = ref();
const action = reactive({
  dialogFormVisible: false,
  listloading:false,
  uuidTableData: [] as any[],
})
const form = reactive({
  user_id: '',
  uuid: '',
  old_uuid:'',
  end_date: '',
})
const formRules = {
  uuid: [{ required: true, trigger: 'blur', message: 'UUID不可为空' }],
}
const handleSubmit = () => {
  dataForm.value.validate(async (valid: any) => {
    if(valid) {
      const loading = Toastloading();
      await numberApi.updateUUID(form.user_id, form)
      loading.close();
      ToastSuccess('修改成功')
      closeDialog();
      $emit('updateList')
    }
  })
  
}
const getuuidlist = async (uesr_id: any) => {
  action.listloading = true;
  const res = await numberApi.getuuidlist({ user_id: uesr_id, page: 1, limit: 10000 });
  action.listloading = false;
  action.uuidTableData = res.data.list;
}
const openDialog = (query: any = {}) => {
  const { user_id, uuid } = query
  form.user_id = user_id
  form.old_uuid = uuid
  getuuidlist(user_id)
  action.dialogFormVisible = true
}
const closeDialog = () => {
  action.dialogFormVisible = false
  Object.assign(form,{
    user_id: '',
    uuid: '',
    old_uuid:'',
    end_date: '',
  })
  action.uuidTableData = []
  nextTick(() => {
    dataForm.value.clearValidate();
  });
}
defineExpose({
  openDialog
})
</script>

<template>
  <div>
    <el-dialog destroy-on-close top="5vh" class="xm-dialog" v-model="action.dialogFormVisible" :close-on-click-modal="false"
      :show-close="false" :close-on-press-escape="false" title="修改UUID">
      <el-form ref="dataForm" :model="form" :rules="formRules" label-width="100px">
        <el-form-item label="uuid" prop="uuid">
          <el-input v-model="form.uuid" />
        </el-form-item>
        <el-form-item label="过期时间" >
          <el-date-picker
            v-model="form.end_date"
            type="datetime"
            format="YYYY-MM-DD hh:mm:ss"
            value-format="YYYY-MM-DD hh:mm:ss"
            placeholder="选择结束时间"
          />
        </el-form-item>
      </el-form>
      <el-table :data="action.uuidTableData" v-loading="action.listloading" border style="width: 100%">
        <el-table-column prop="operator_user" label="操作人" align="center" />
        <el-table-column prop="created_at_tip" label="操作时间" align="center" />
        <el-table-column prop="old_uuid" label="更改前uid" align="center" />
        <el-table-column prop="new_uuid" label="更改后uid" align="center" />
        <el-table-column prop="change_mode_tip" label="更改原因" align="center" />
        <el-table-column prop="expiry_time_tip" label="到期时间" align="center" />
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>